<!--
 * @Author: “1077321622@qq.com” lzr448470520
 * @Date: 2023-11-23 11:07:47
 * @LastEditors: “1077321622@qq.com” lzr448470520
 * @LastEditTime: 2023-12-01 11:59:24
 * @FilePath: \Vue3开发常用插件集合\插件\vue3-common-plugins\src\views\Home.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-container class="layout-container-demo" style="height: 100%">
    <el-aside width="200px" :style="{ background: color }">
      <el-scrollbar>
        <el-menu
          router
          unique-opened
          :default-openeds="['0']"
          :background-color="color"
          text-color="#fff"
          active-text-color="#E91E63"
          :default-active="activeTabName"
          collapse-transition
          @select="changeTab"
        >
          <el-sub-menu
            v-for="(item, index) in menusList"
            :key="index"
            :index="'/' + index"
          >
            <template #title>
              <el-icon>
                <component :is="item.icon"></component>
              </el-icon>
              <span>{{ item.label }}</span>
            </template>

            <el-menu-item
              v-for="(child, chi) in item.children"
              :index="child.name"
              :key="chi"
            >
              <span>{{ child.label }}</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-main>
      <el-header class="header" :style="{ background: color }">
        <div class="minabox dis">
          <div class="colors">
            <el-color-picker
              v-model="color"
              size="large"
              @change="changeColors"
            />
            <p style="font-size: 12px">主题</p>
          </div>
        </div>
      </el-header>
      <!---选项卡-->
      <div class="tabbox">
        <div class="taglist">
          <el-tabs
            v-model="indexcolor"
            type="card"
            class="demo-tabs"
            closable
            @tab-click="handclick"
            @tab-remove="removeTab"
          >
            <el-tab-pane
              v-for="item in editableTabs"
              :key="item.path"
              :label="item.title"
              :name="item.path"
            >
            </el-tab-pane>
          </el-tabs>
        </div>

        <div class="more">
          <el-dropdown>
            <span class="el-dropdown-link">
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="closeother"
                  >关闭其他</el-dropdown-item
                >
                <el-dropdown-item @click="closeAll">关闭全部</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <!-- 这里是重点！！！ -->
      <el-scrollbar>
        <RouterView />
      </el-scrollbar>
    </el-main>
  </el-container>
</template>

<script  setup>
import { ref, watch, watchEffect } from "vue";
import { storeToRefs } from "pinia";
import { Menu as IconMenu, Message, Setting } from "@element-plus/icons-vue";
import { RouterView, useRoute, useRouter } from "vue-router";
const router = useRouter();
import themeClor from "../stores/themeColor";
// 因为是个方法，所以我们得调用一下
const colorStr = themeClor();
const { color } = storeToRefs(colorStr);

//默认显示第一个菜单  监听路由的变化，即使刷新页面也还是上一次点击的菜单
let activeTabName = ref("");
watch(
  () => router.currentRoute.value.name,
  (newValue, oldValue) => {
    console.log()
    activeTabName.value = newValue;
  },
  { immediate: true }
);

//颜色对应
let indexcolor = ref("");
const editableTabs = ref([]);
let len = ref("");
//去重重复的
const setArr = (arr) => {
  let list = [];
  return arr.filter(
    (item) => !list.includes(item.title) && list.push(item.title)
  );
};

watch(
  () => router.currentRoute.value,
  (newValue) => {
    editableTabs.value.push({
      title: newValue.meta.title,
      path: newValue.path,
      name: newValue.path,
    });
    //去重重复的
    let data = setArr(editableTabs.value);
    editableTabs.value = data;
    //设置选中的颜色
    indexcolor.value = newValue.path;
  },
  { immediate: true }
);

const handclick = (val, e) => {
  router.push({
    path: val.props.name,
  });
};
//删除
const removeTab = (val) => {
  var arr = editableTabs.value;
  len.value = editableTabs.value.length;
  //找出下标
  var index = arr.map((item) => item.path).indexOf(val);

  //这里就分为从后面删 中间删 第一个删  必须保留一个
  if (index != 0) {
    if (len.value > 1) {
      router.push({
        path: editableTabs.value[index - 1].path,
      });
      editableTabs.value.splice(index, 1);
    }
  } else {
    if (len.value > 1) {
      router.push({
        path: editableTabs.value[index + 1].path,
      });
      editableTabs.value.splice(index, 1);
    }
  }

  // console.log("删除的是第几个"+index)
  // console.log("数组总"+len.value)
};

//关闭其他
const closeother = () => {
  var arr = editableTabs.value;
  //找出下标
  var index = arr.map((item) => item.path).indexOf(indexcolor.value);
  let newarr = [
    {
      name: editableTabs.value[index].name,
      path: editableTabs.value[index].path,
      title: editableTabs.value[index].title,
    },
  ];
  editableTabs.value = newarr;
};

//关闭全部

const closeAll = () => {
  //这里为了刷新保留当前路由菜单，直接刷新 
  window.location.reload();
};
const menusList = [
  {
    icon: "Setting",
    label: "常用插件",
    children: [
      {
        name: "imgcropper",
        label: "图片裁剪",
        path: "/imgcropper",
      },
      {
        name: "tinymce",
        label: "富文本",
        path: "/tinymce",
      },
      {
        name: "dayjs",
        label: "Dayjs",
        path: "/dayjs",
      },
      {
        name: "pdf",
        label: "pdf",
        path: "/pdf",
      },
     
    ],
  },

  {
    icon: "Setting",
    label: "vue3",
    children: [
      {
        name: "father-son",
        label: "父子通讯",
        path: "/father-son",
      },
    ],
  },

  {
    icon: "Opportunity",
    label: "系统设置",
    children: [
      {
        name: "sys",
        label: "系统设置",
        path: "/sys",
      },
    ],
  },
];

const changeTab = (path) => {
  router.push({
    path: "/" + path,
  });
};

const changeColors = (col) => {
  colorStr.color = col;
};
</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  color: #fff;
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.el-menu-item.is-active {
  background: #04aca6 !important;
  color:#fff  !important;
}
.tabbox {
  width: 100%;
  position: relative;
}
.taglist {
  flex: 1;
  margin-right: 30px;
}
.more {
  width: 30px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0px;
}
:deep(.taglist .is-active){
 font-weight: bold;
 color: v-bind(color)
}
</style>
